<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
	<head>
		<title>Wap 电商平台</title>
		<meta charset="UTF-8">
		<script th:replace="common/head::static"></script>
	</head>
</html>
<body>
	<div id="app" class="goods-container">
		<nut-navbar back-show="false" :more-show="false" class="demo-nav" title="商品列表">
			<template slot="back-icon">
				<span>&nbsp;</span>
			</template>
		</nut-navbar>
		<nut-noticebar
	      left-icon="https://img13.360buyimg.com/imagetools/jfs/t1/72082/2/3006/1197/5d130c8dE1c71bcd6/e48a3b60804c9775.png"
	    	style="margin:10px;"
	    >知名品牌上架入住，更多介绍信息请持续关注！
    	</nut-noticebar>
    	
		
		<input style="width: 70%;height: 25px;margin-left: 10px;" type="text" v-model="input" placeholder="输入0-9" ">
		<lable><button @click="search" style="font-size: 15px;height: 28px; line-height: 15px;">搜索商品</button></lable>
		
		
		
		<div :is-link="true" class="cell-box" v-for="(item,index) in goodsList" :key="index" v-if="currentIndex==='' >
		  <nut-cell @click-cell="goDetails(item.id)">
		    <div slot="avatar">
		    	<nut-avatar style="height:80px;width:80px; " :bg-image="imgBaseUrl + item.imgs[0]"  bg-icon></nut-avatar>
		    </div>
		    <template slot="title">
		    	<div class="goods-title">{{item.name}}</div>
		    </template >
			<template slot="sub-title">
		      	<div class="goods-price">￥{{item.price}}</div>
		    </template>
		  </nut-cell>
		</div>
		
		 
		
		
		<nut-cell @click-cell="goDetails(goodsList[currentIndex].id)" v-if="currentIndex!=''">
		    <div slot="avatar">
		    	<nut-avatar style="height:80px;width:80px; " :bg-image="imgBaseUrl + goodsList[currentIndex].imgs[0]"  bg-icon></nut-avatar>
		    </div>
		    <template slot="title">
		    	<div class="goods-title">{{goodsList[currentIndex].name}}</div>
		    </template >
			<template slot="sub-title">
		      	<div class="goods-price">￥{{goodsList[currentIndex].price}}</div>
		    </template>
		  </nut-cell>
		  
		  
		<nut-tabbar @tab-switch="tabSwitch1" :tabbar-list="tabList" :bottom="true"> </nut-tabbar>
	</div>
	<script src="./js/menu.js" type="text/javascript"></script>
	<script type="text/javascript">
		tabList = menuList;
		tabList[1].curr = true;
		// 商品数据（后台获取）
		/**
		var goodsList = [
			{name:"【Html Css Java 标准课件】商品名称，差不得内容",img:"https://nutui.jd.com/3x/img/cell-avatar.jpeg",price:110},
			{name:"【Vue 标准课件】商品名称，差不都得内容",img:"https://nutui.jd.com/3x/img/cell-avatar.jpeg",price:220},
			{name:"【Spring boot标准课件】商品名称，差不都得内容",img:"https://nutui.jd.com/3x/img/cell-avatar.jpeg",price:120}
		];
		**/
		new Vue({
			el: '#app',
            data() {
				return {
			      	tabList: tabList,
			      	goodsList:[],
			      	imgBaseUrl: "https://airpass-training.oss-cn-hangzhou.aliyuncs.com/",
			      	options: [],
			        value: [],
			        list: [],
			        loading: false,
			        currentIndex:'',
			        value:'',
			        input:''
				}
			},
			created: function(){
				this.getNextPage();
			},
			methods: {
				getNextPage:function() {
					_self = this;
					$.get("/item/list", {page:1,size:1,name:""}, function(ret){
							if (ret.rc == "S") {
								_self.goodsList = ret.data;
								console.log(_self.goodsList)
							}
						}
					);
					
				},
				search(){
					this.cruuentIndex=this.input
					console.log(this.cruuentIndex)
					alert("商品"+this.cruuentIndex)
				},
				tabSwitch1: function(value, index) {
					var path = "";
					switch(index) {
						case 0:
							path = "/index"
							break;
						case 1:
							path = "/goods"
							break;
						case 2:
							path = "/order"
							break;
						case 3:
							path = "/my"
							break;
					}
					location.href = path;
				},
				goDetails:function(id){
					location.href = "/goods_details?id=" + id;
				}
			}
		});
	</script>
	<style>
	.active{
	backgroundcolor:red;
	}
	</style>
</body>